<template>
	<div>
		<!-- 选项卡 -->
		<tabs
			class="bgwhite"
			:formData="tabs"
			default='A'
			@changeTab="changeTab"
			style="padding:0 0 5px 52px">
		</tabs>
		<!-- 过滤条件 -->
		<div class="filter flex flex-between flex-y">
			<div class="flex">
				<search
					style="width:200px;"
					class="right20"
					tip="请输入关键字"
					@searchOK="searchOK">
				</search>
				<div class="flex flex-y right20">
					<div class="right10">内容</div>
					<el-select
						clearable
						style="width:140px"
						v-model="value_type"
						placeholder="请选择"
						@change="list">
						<el-option
							v-for="item in this.common.list_content"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="flex flex-y right20">
					<div class="right10">账号</div>
					<el-select
						clearable
						style="width:140px"
						v-model="value_account"
						placeholder="请选择"
						@change="list">
						<el-option
							v-for="item in this.common.list_account"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="flex flex-y right20">
					<div class="right10">用户</div>
					<el-select
						clearable
						style="width:140px"
						v-model="value_users"
						placeholder="请选择"
						@change="list">
						<el-option
							v-for="item in this.common.list_userType"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="flex flex-y right20">
					<div class="right10">日期</div>
					<el-date-picker
						style="width:220px"
						v-model="date"
						type="daterange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="yyyy-MM-dd"
						@change="list">
					</el-date-picker>
				</div>
			</div>
			<div class="flex">
				<el-button @click="reset()">重置</el-button>
				<el-button type="primary" @click="exportExcel()" :disabled="select_id.length == 0">导出</el-button>
			</div>

		</div>
		<!-- 表格 -->
		<div class="main">
			<el-table
				v-loading="loading"
				:data="formData"
				style="width: 100%"
				row-key="id"
				@sort-change="changeSort"
				@selection-change="selectTable">
				<el-table-column
					:reserve-selection="true"
					type="selection"
					width="55">
				</el-table-column>
				<el-table-column
					v-if="checked.includes('id')"
					prop="id"
					label="内容ID"
					width="100">
				</el-table-column>
				<el-table-column
					v-if="checked.includes('contentType')"
					prop="contentType"
					label="内容类型">
					<template slot-scope="scope">
						{{filter_contenType(scope.row.contentType)}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="checked.includes('title')"
					prop="title"
					label="标题"
					width="200">
					<template slot-scope="scope">
						<div class="nowrap">{{scope.row.title}}</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="checked.includes('topic')"
					prop="topic"
					label="话题"
					width="200">
					<template slot-scope="scope">
						<div class="nowrap">{{scope.row.topic}}</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="checked.includes('authorizeId')"
					prop="authorizeId"
					label="作者ID">
				</el-table-column>
				<el-table-column
					v-if="checked.includes('accountType')"
					prop="accountType"
					label="账号类型">
					<template slot-scope="scope">
						{{filter_accountType(scope.row.accountType)}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="checked.includes('userType')"
					prop="userType"
					label="用户类型">
					<template slot-scope="scope">
						{{filter_userType(scope.row.userType)}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="checked.includes('accountName')"
					prop="accountName"
					label="账号名称">
				</el-table-column>
				<el-table-column
					v-if="checked.includes('heat')"
					sortable="custom"
					prop="heat"
					label="热度">
				</el-table-column>
				<el-table-column
					v-if="checked.includes('createTime')"
					sortable="custom"
					prop="createTime"
					label="发布时间"
					width="158">
				</el-table-column>
				<el-table-column
					v-if="checked.includes('releaseTime')"
					sortable="custom"
					prop="releaseTime"
					label="审核时间"
					width="158">
				</el-table-column>
				<el-table-column
					v-if="checked.includes('checkStatus')"
					prop="checkStatus"
					label="审核状态">
					<template slot-scope="scope">
						<span :class="{'red':scope.row.checkStatus,'green':!scope.row.checkStatus}">{{filter_checkStatus(scope.row.checkStatus)}}</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="checked.includes('isInfrom')"
					prop="isInfrom"
					label="是否被举报"
					width="120">
					<template slot-scope="scope">
						<!-- true=是,false=否 -->
						<span :class="{'red':scope.row.isInfrom}">{{filter_inform(scope.row.isInfrom)}}</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="checked.includes('status')"
					prop="status"
					label="当前状态">
					<template slot-scope="scope">
						<!-- 0=已上线,1=已下线,2=未推荐,3=已推荐，4=已拒绝 -->
						<span :class="{'orange':scope.row.status == 1,'blue':scope.row.status == 3}">{{filter_status(scope.row.status)}}</span>
					</template>
				</el-table-column>
				<el-table-column
					fixed="right"
					label="操作"
					width="200">
					<template slot="header" slot-scope="scope">
						<div class="flex flex-y" style="display:flex">
							<span>操作</span>
							<el-popover
								placement="bottom"
								width="160"
								trigger="click">
								<div class="tips">
									<el-checkbox-group v-model="checked">
									    <el-checkbox
											style="margin:6px 10px;width:100%"
											v-for="item in checkeds"
											:label="item.value"
											:key="item.label">{{item.label}}
										</el-checkbox>
									</el-checkbox-group>
								</div>
								<div class="allData" slot="reference">全部数据<i class="el-icon-menu"></i></div>
							</el-popover>
						</div>
					</template>
					<template slot-scope="scope">
						<!-- 0=已上线,1=已下线,2=未推荐,3=已推荐，4=已拒绝 -->
						<el-button
							@click.native="view(scope.row)"
							type="text"
							size="small">查看</el-button>
						<el-button
							v-if="scope.row.status == 1"
							@click.native="handle('up',scope.row)"
							type="text"
							size="small">上线</el-button>
						<el-button
							v-if="scope.row.status != 1"
							@click="handle('off',scope.row)"
							type="text"
							size="small">下线</el-button>
						<!-- 0:已推荐:1:未推荐 -->
						<el-button
							v-if="scope.row.status != 3 && scope.row.status !=1"
							@click.native="recomment('up',scope.row)"
							type="text"
							size="small">推荐</el-button>
						<el-button
							v-if="scope.row.status == 3 && scope.row.status !=1"
							@click.native="recomment('off',scope.row)"
							type="text"
							size="small">取消推荐</el-button>
						<el-button
							v-if="scope.row.status != 1"
							@click="getZan(scope.row)"
							type="text"
							size="small">增加点赞</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<page :total="pageTotal" @change="changePage"></page>
			<!-- 下线原因 -->
			<off :ifShow="ifShow" :formData="currentData" @httpSuccess="list"></off>
			<!-- 推荐至 -->
			<recommend :ifShow="ifRecommend" :formData="currentData" @httpSuccess="list" status="robot"></recommend>
		</div>
	</div>
</template>

<script>
import tabs from '@/components/public/tabs/tabs'
import search from '@/components/public/search/search'
import page from '@/components/public/Pagination'
import off from '@/components/content/off'
import recommend from '@/components/content/recommend'
import {formatDate} from '@/utils/formatDate.js'
import { remote } from '@/api/index'
export default {
	components:{
		tabs,
		search,
		page,
		off,
		recommend
	},
	data () {
		return {
			//选项卡
			active:null,
			tabs:[
				{
					value:'A',  //如果设为null的话它自动转为0，很蛋疼
					label:"全部"
				},
				{
					value:'B', //实际是0
					label:"已通过" //已上线
				},
				{
					value:'3',
					label:"已拒绝"
				},
				{
					value:'1',
					label:"已下线"
				},
				{
					value:'2',
					label:"已推荐"
				},
			],

			//过滤条件
			search:"",
			value_type:"",
			value_account:"",
			value_users:"",
			date:[],

			//弹窗
			ifShow:false,
			ifRecommend:false,
			currentData:"",

			//表格
			loading:false,
			formData:[],
			select_id:[],
			orderBy:'', //排序，1:热度2：发布时间3：审核时间
			ascDesc:'', //0:asc 1:desc
			checked:[], //全部数据
			checkeds:[
				{
					value:"id",
					label:"内容ID"
				},
				{
					value:"contentType",
					label:"内容类型"
				},
				{
					value:"title",
					label:"标题"
				},
				{
					value:"topic",
					label:"话题"
				},
				{
					value:"authorizeId",
					label:"作者ID"
				},
				{
					value:"accountType",
					label:"账号类型"
				},
				{
					value:"userType",
					label:"用户类型"
				},
				{
					value:"accountName",
					label:"账号名称"
				},
				{
					value:"heat",
					label:"热度"
				},
				{
					value:"createTime",
					label:"发布时间"
				},
				{
					value:"releaseTime",
					label:"审核时间"
				},
				{
					value:"checkStatus",
					label:"审核状态"
				},
				{
					value:"isInfrom",
					label:"是否被举报"
				},
				{
					value:"status",
					label:"当前状态"
				},
			],

			//分页
			pageNum: 1,
			pageSize: 20,
			pageTotal:"",
		}
	},
	methods:{
		list:function(){
			this.loading = true;
			//处理选项卡
			let active = '';
			if(this.active == 'A'){
				active = '';
			}
			else if(this.active == 'B'){
				active = '0';
			}
			else{
				active = this.active;
			}
            HTTP('robot_list', {
				status:active,
				searchStr:this.search,
				userType:this.value_users, //用户类型
				contentType:this.value_type, //内容类型
				accountType:this.value_account, //账户类型
				beginTime:this.date?this.date[0]:'',
				endTime:this.date?this.date[1]:'',
				pageNum:this.pageNum,
				pageSize:20,
				orderBy:this.orderBy,
				ascDesc:this.ascDesc
            })
            .then(res => {
                if(res.code == 200){
                    this.formData = res.rows;
					this.pageTotal = res.total;
					this.loading = false;
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
		},
		//重置
		reset:function(){
			this.pageNum = 1;
			this.search = '';
			this.value_type = '';
			this.value_users = '';
			this.value_account = '';
			this.date = [];
			this.list();
		},
		//导出
		exportExcel:function(){
			HTTP('robot_excel', {
				uids:this.select_id.join(',')
			})
			.then(res=>{
				if(res.code == 200){
					window.open(remote + 'common/download?fileName=' + res.msg + '&delete=true')
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
		//选择表格
		selectTable:function(e){
			//console.log(e);
			this.select_id = [];
			e.map(o=>{
				this.select_id.push(o.uid);
			})
		},
		//切换选项卡
		changeTab:function(e){
			this.active = e;
			this.list();
		},
		//跳详情
		view:function(obj){
			this.$router.push({
				path:'/run/content/detail',
				query:{
					id:obj.uid,
					type:obj.contentType //1=动态,2=提问,3=文章,4=回答,5=评论
				}
			})
		},
		//时间戳转时间
		filter_date:function(time){
			let date = new Date(time*1000);
			return formatDate(date,'yyyy-MM-dd mm:ss');
		},
		//内容类型
		filter_contenType:function(val){
			//1=动态,2=提问,3=文章,4=回答,5=评论
			switch (val) {
				case 1:
					return '动态';
					break;
				case 2:
					return '提问';
					break;
				case 3:
					return '文章';
					break;
				case 4:
					return '回答';
					break;
				case 5:
					return '评论';
					break;
				default:
					return val
			}
		},
		//账号类型
		filter_accountType:function(val){
			//0=砂锅用户,1=砂锅号用户
			return val == '1'?'砂锅号':'砂锅用户'
		},
		//用户类型
		filter_userType:function(val){
			//1=投资人,2=服务商,3=创业者,4=上班族,5=在校生,6=未认证(砂锅),7=个人,8=政府,9=媒体,10=企业,11=未认证(砂锅号)
			switch (val) {
				case 1:
					return '投资人';
					break;
				case 2:
					return '服务商';
					break;
				case 3:
					return '创业者';
					break;
				case 4:
					return '上班族';
					break;
				case 5:
					return '在校生';
					break;
				case 6:
					return '未认证(砂锅)';
					break;
				case 7:
					return '个人';
					break;
				case 8:
					return '政府';
					break;
				case 9:
					return '媒体';
					break;
				case 10:
					return '企业';
					break;
				case 11:
					return '未认证(砂锅号)';
					break;
				default:
					return val
			}
		},
		//审核状态
		filter_checkStatus:function(val){
			//0=通过,1=已拒绝
			return val?'拒绝':'通过'
		},
		//是否被举报
		filter_inform:function(val){
			//true=是,false=否
			return val?'是':'否'
		},
		//当前状态
		filter_status:function(val,e){
			//<!-- 0=已上线,1=已下线,2=未推荐,3=已推荐，4=已拒绝 -->
			if(val == 1){
				return '已下线'
			}
			else if(val == 2 && val != 1){
				return '未推荐'
			}
			else if(val == 3 && val != 1){
				return '已推荐'
			}
			else if(val == 4){
				return '已拒绝'
			}
			else{
				return '已上线'
			}
		},
		//搜索
		searchOK:function(val){
			this.pageNum = 1;
			this.search = val;
			this.list();
		},
		//改变分页
		changePage:function(obj){
			this.pageSize = obj.pageSize;
			this.pageNum = obj.pageNum;
			this.list();
		},
		//获取点赞数
		getZan:function(obj){
			HTTP('robot_getZan')
			.then(res=>{
				if(res.code == 200){
					this.$confirm(`根据参数配置，本次将增加点赞数${res.data.approvals}，增加浏览量${res.data.browses}`, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.addZan(obj);
					})
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
		//增加点赞数
		addZan:function(obj){
			HTTP('robot_addZan', {
				uid:obj.uid,
				contentType:obj.contentType
			})
			.then(res=>{
				if(res.code == 200){
					this.common.msg('操作成功');
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
		//上/下线
		handle:function(type,obj){
			//1：下线，0：上线
			//下线
			if(type == 'off'){
				this.currentData = obj;
				this.ifShow = !this.ifShow;
			}
			//上线
			else{
				HTTP('robot_off', {
					contentType:obj.contentType,
					uid:obj.uid,
					status:'0',
					reason:''
				})
				.then(res=>{
					if(res.code == 200){
						this.common.msg('上线成功');
						this.list();
					}
					else{
						this.common.msg(res.msg,'error');
					}
				})
			}
		},
		//推荐/取消推荐
		recomment:function(type,obj){
			//0:已推荐:1:未推荐
			//取消推荐
			if(type == 'off'){
				HTTP('robot_recommend', {
					contentType:obj.contentType,
					uid:obj.uid,
					status:'1'
				})
				.then(res=>{
					if(res.code == 200){
						this.common.msg('取消推荐成功');
						this.list();
					}
					else{
						this.common.msg(res.msg,'error');
					}
				})
			}
			//推荐
			else{
				this.currentData = obj;
				this.ifRecommend = !this.ifRecommend;
			}
		},
		//排序
		changeSort:function(e){
			//1:热度2：发布时间3：审核时间
			//上："ascending"，下："descending"
			if(e.prop == 'heat'){
				this.orderBy = 1;
			}
			else if(e.prop == 'createTime'){
				this.orderBy = 2;
			}
			else if(e.prop == 'releaseTime'){
				this.orderBy = 3;
			}
			this.ascDesc = e.order=="descending"?1:0;
			this.list();
		}
	},
	mounted(){
		this.list();
		//全部数据 筛选
		this.checkeds.map(o=>{
			this.checked.push(o.value);
		})
	}
}
</script>

<style lang="scss" scoped>
	//popover
	/deep/ .el-tooltip__popper .is-light{
		border: 1px solid #fff;
	}
	.filter{
		padding: 5px 30px 25px 40px;
		background-color: #fff;
	}
	.main{
		background-color: #fff;
		margin-top: 10px;
		padding: 30px 50px;
		.allData{
			margin-left: 40px;
			margin-bottom: -14px;
			color: #666;
			font-weight: normal;
			cursor: pointer;
			i{
				margin-left: 4px;
				color: $blue;
			}
		}
	}
	//颜色
	.red{
		color: $red;
	}
	.blue{
		color: $blue;
	}
	.orange{
		color: $orange;
	}
	.green{
		color: $green;
	}
</style>
